<!-- 结构 -->
<script setup lang="ts">
import { ref } from 'vue';

const count = ref(100)

const isShow = ref(false)
const toggle = () => {
    isShow.value = !isShow.value
}

const isShow1 = ref(false)
const toggle1 = (value: boolean, intro: string) => {
    isShow1.value = !value
    alert(intro)
}

</script>

<!-- JS逻辑 -->
<template>
    <div class="app-page">

        <!-- 1.内联语句 -->
        <button v-on:click="count--">-</button>
        <span>{{ count }}</span>
        <button @click="count++">+</button>

        <hr>

        <!-- 2.处理函数 -->
        <button @click="toggle">切换</button>
        <div v-show="isShow" class="box"></div>

        <hr>

        <!-- 3.处理函数传参 -->
        <button @click="toggle1(isShow1, '恭喜发财')">切换</button>
        <div v-show="isShow1" class="box1"></div>

    </div>
</template>

<!-- 样式 -->
<style lang="css" scoped>
.box {
    width: 200px;
    height: 200px;
    background-color: palevioletred;
}

.box1 {
    width: 200px;
    height: 200px;
    background-color: paleturquoise;
}
</style>